【jQuery】click()はイベント発火に便利！使い方を解説

您所在的位置：网站首页 › jquery html 埋め込み › 【jQuery】click()はイベント発火に便利！使い方を解説

【jQuery】click()はイベント発火に便利！使い方を解説

2024-01-16 16:24| 来源: 网络整理| 查看: 265

click()イベントは、jQueryの中でよく使われるもの。click()イベントにイベントを登録することで、さまざまな処理が実行できます。この記事では「click()イベントの使い方」、「click()イベントと混同されるon('click')メソッドとの違い」について解説します。

この記事で身につく内容jQueryのclick()イベントの使い方click()イベントとon('click')の違いclick()イベントが効かないときの対処法

\ 【毎日先着制】98,000円の講座を0円で受講できる /

30日間で学びきれるプログラミングスクールZeroPlus Gate

完全無料のプログラミングスクール 30日間でWebサイトが作れるようになる 50本以上の動画教材をいつでも視聴可能毎週専属メンターとの面談で悩みを解決現役エンジニアに質問し放題 ZeroPlus Gate紹介画像

※専属メンターの数には限りがあるため、受講者数は毎日最大30人までの先着制です

今すぐZeroPlus Gateの詳細を見る

メールマガジンバナー

jQueryのclick()イベントの使い方click()イベントでクラスを追加・削除してスタイルを変更するclick()イベントで引数を渡すclick()イベントとon('click')の違いclick()イベントはクリックイベントしか登録できないclick()イベントは、jQueryで後から追加された要素にイベントを登録できないclick()イベントが効かないときの対処法まとめjQueryのclick()イベントの使い方

click()イベントは、jQueryのメソッドの一つで、クリック操作で発火するイベントを実行します。

jQueryのclick()イベントの基本書式は次のようになります。

基本書式

$('セレクタ').click(function(){ // ここにクリックしたら発火する処理を記述する });

click()イベントにコードを当てはめると次のようになります。

click()イベントのサンプル

ボタンクリックでアラートが出るconst btn = $("#js-btn"); btn.click(function () { alert('クリックされました！'); });

出力結果

See the Pen click-alert by ZeroPlus (@zeroplus-programming) on CodePen.

上のコードでは、「ボタンをクリックしたらalreatメソッドによってアラートが出る」イベントを設定しました。

このようにクリックイベントは単体では何も起きません。しかし、クリックイベントにメソッドなどさまざまな処理を記述することで、クリックしてイベントを「発火」させることができます。

click()イベントでクラスを追加・削除してスタイルを変更する

click()イベントに次のようなメソッドを適用することで、要素にクラスを追加、削除することができます。

要素にクラスを追加・削除するメソッド

toggleClass()メソッドaddClass()メソッドremoveClass()メソッド

例えば、次のように「ボタンをクリックしたら要素にクラスを追加・削除する」イベントを適用してみます。

ボタンをクリックしたらis-activeクラスを追加・削除する

ボタンクリック！ .box { width: 200px; height: 200px; background: orange; transition: .4s; } /* is-activeクラスが付与された状態のスタイル */ .box.is-active { border-radius: 50%; }const btn = $("#js-btn"); const box = $('.box'); btn.click(function () { box.toggleClass("is-active"); });

出力結果

See the Pen click-toggleClass by ZeroPlus (@zeroplus-programming) on CodePen.

CSSでis-activeクラスが付与された状態のスタイルを予め用意しておきます。ボタンをクリックすると、is-activeクラスの追加・削除が行われます。これはtoggleClass()メソッドによるものです。

click()イベントで引数を渡す

click()メソッドでは、引数を渡すことができます。

引数とは関数に渡すデータのこと。例えば次のように記述できます。

オブジェクトを渡すボタンconst btn = $("#js-btn"); const obj = { num: 1, name: "taro", } btn.click(obj, function () {　//(引数, function() console.log(obj); // 引数は関数内で変数のように扱える });

出力結果

変数「obj」というオブジェクトを作成しています。

ボタンをクリックしたらコンソール画面でオブジェクトのデータを確認することができます。なお、オブジェクトに含まれる特定のデータを取り出す場合は次のようになります。

const btn = $("#js-btn"); const obj = { num: 1, name: "taro", } btn.click(obj, function () { console.log(obj.name);　// 変数objのnameデータを取り出す });

出力結果

jquery-引数と値

これでオブジェクトに含まれるデータを取り出すことができました。

ZeroPlusgate50教材の動画

click()イベントとon('click')の違い

on()メソッドとはjQueryのメソッドの一つ。on()メソッドは指定したイベントを発火させることができます。

on()メソッドの基本書式

$('セレクタ').on(イベント名, 実行する処理());

コードを当てはめると次のように記述できます。

on()メソッドのサンプル

ボタンをクリック！const btn = $('#js-btn'); btn.on('click', function () { console.log('ボタンがクリックされました。'); });

出力結果

click()イベントと同様の結果を得ることができました。

click()イベントとon('click')メソッドの違いはいったい何でしょうか？

実はこの2つの違いは、下記になります。

複数のイベントを登録できるかどうかjQueryで後から追加した要素に、イベントを登録できるかどうかclick()イベントはクリックイベントしか登録できない

click()イベントはクリックイベントしか登録できません。しかしon('click')メソッドでは複数のイベントを登録することができます。

例えばon('click')メソッドは次のように複数のイベントを登録できます。

on('click')メソッドで複数イベント登録

ボタンをクリック！ .box { width: 200px; height: 200px; background: orange; transition: .4s; } .box.is-active { border-radius: 50%; }const btn = $('#js-btn'); const box = $('.box'); btn.on({ 'click': function () { box.toggleClass("is-active"); }, 'mouseover': function () { box.css('transform', 'translate(30%)'); } });

出力結果

https://zero-plus.io/media/wp-content/uploads/2022/03/onclick-複数イベント.mp4

on('click')メソッドで「クリックしたら要素にis-activeクラスを追加・削除」「ボタンをホバーしたら要素が動く」の2つのイベントが発火するようになりました。このようにon('click')メソッドでは複数のイベントを登録することができます。

click()イベントは、jQueryで後から追加された要素にイベントを登録できない

click()イベントは、afterメソッドで要素が追加されてもイベントを登録することはできません。

click()イベントで要素を追加ボタンをクリック！ .box { width: 200px; height: 200px; background: orange; } .box2 { width: 100px; height: 100px; background: orange; }const btn = $('#js-btn'); const box = $('.box'); btn.click(function () { $('div').after("click!"); }); $('.box2').click(function () { $('.box2').css('background', 'red'); // 生成された要素にcssメソッドは効かない });出力結果https://zero-plus.io/media/wp-content/uploads/2022/03/jQuery-click-button.mp4上記の場合、divタグが生成されていたとしてもjQueryによって生成されたdivタグをクリックしてもCSSメソッドは効きません。on('click')メソッドでは次のように記述します。on('click')メソッドで要素を追加const btn = $('#js-btn'); const box = $('.box'); btn.on('click', function () { box.after('クリック！'); }); $(document).on('click', '.box2', function () { $(this).css('background', 'red'); // 生成された要素にCSSメソッドは効く });

出力結果

https://zero-plus.io/media/wp-content/uploads/2022/03/jQuery-onclick-button.mp4

on('click')メソッドの場合、要素が生成されたものであってもCSSメソッドが効きます。

click()イベントが効かないときの対処法

以下の場合で、click()イベントは動作しません。

jQueryで動的に追加された要素にイベントを登録できない

動的に要素を追加したり削除したりする要素に対しては、click()イベントが効きません。その場合はon('click')メソッドを使う方法に変えてみましょう。

まとめ

click()イベントはjQueryでよく使用されるメソッドです。思うように動作しない場合があるため、その場合はon('click')メソッドに切り替えるなどして、使い分けていきましょう。

click()イベントまとめ

click()イベントが登録できるのは、クリックイベントのみ。動的に追加された要素にイベントを登録することはできない。click()イベントが効かない場合はon('click')を使う。

\ 【毎日先着制】98,000円の講座を0円で受講できる /